;
(function () {
	var rentStatus0 = new Vue({
		el: '#rentStatus0',
		data() {
			return {
				date0: '',
			}
		},
		methods: {
			selectD() {
				rentUnitCharts.getRank()
			},
		},
	})

	var rentUnitCharts = {
		init: function () {
			this.date()
			this.rentTab()
			this.rentRate()
			this.ifUser()
			this.selectDate()
			this.selected()
			hlSelectUi()
		},
		//判断登陆用户
		ifUser: function () {
			var tenantType = hlStorage.getUserMes('tenantType');
			if (tenantType === 'A') {
				$('.rent-selected-nav li').eq(0).trigger('click')
				$('.address-tab-span').text($('.rent-selected-nav li').eq(0).text())
			}
			if (tenantType === 'B') {
				$('.rent-selected-nav li').eq(0).hide()
				$('.rent-selected-nav li').eq(1).trigger('click')
				$('.address-tab-span').text($('.rent-selected-nav li').eq(1).text())
			}
			if (tenantType === 'C') {
				$('.rent-selected-nav li').eq(0).hide()
				$('.rent-selected-nav li').eq(1).hide()
				$('.rent-selected-nav li').eq(2).trigger('click')
				$('.address-tab-span').text($('.rent-selected-nav li').eq(2).text())
			}
		},
		//今天日期
		date: function () {
			var date = new Date()
			rentStatus0.date0 = hlDateUtil.countSeveralDaysTime(date, 0)
		},
		//切换
		rentTab: function () {
			var self = this;
			$('.rent-selected-nav').unbind().on('click', 'li', function (event) {
				$('.selected-rent span').text('请选择').removeAttr('data-id')
				$(this).addClass('active').siblings('li').removeClass('active')
				$('.address-tab-span').text($(this).text())

				if ($(this).text() === '集团') {
					self.getGroup()


					setTimeout(function () {
						self.getRank()
					}, 200);
				}
				if ($(this).text() === '大区') {
					self.getRegion()
				}
				if ($(this).text() === '公司') {
					self.getCity()
				}
			})
		},
		//获取集团
		getGroup: function () {
			var str = '';
			hlhttp.get({
				url: 'sub_organizations',
				data: {
					pid: 0
				},
				success: function (data) {
					for (var i = 0; i < data.length; i++) {
						if (data[i].type === 'JT') {
							str += '<li data-id="' + data[i].id + '">' + data[i].shortName +
								'</li>'
						}
					}
					$('.selected-rent ul').html(str)
					$('.selected-rent span').text(data[0].shortName).attr('data-id', data[0].id)
				}
			})
		},
		//获取大区
		getRegion: function () {
			var str = '';
			hlhttp.get({
				url: 'sub_organizations',
				data: {
					pid: 0
				},
				success: function (data) {
					hlhttp.get({
						url: 'sub_organizations',
						data: {
							pid: data[0].id
						},
						success: function (res) {
							for (var i = 0; i < res.length; i++) {
								if (res[i].type === 'DQ') {
									str += '<li data-id="' + res[i].id + '">' + res[
										i].shortName + '</li>'
								}
							}
							$('.selected-rent ul').html(str)
						}
					})
				}
			})
		},
		//获取公司
		getCity: function () {
			var str = '';
			hlhttp.get({
				url: 'companys',
				success: function (data) {
					for (var i = 0; i < data.length; i++) {
						var name = data[i].shortName ? data[i].shortName : data[i].fullName
						str += '<li data-id="' + data[i].compayId + '">' + name + '</li>'
					}
					$('.selected-rent ul').html(str)
				}
			})
		},
		//空置面积/空置率/出租面积/出租率排名
		rentRate: function () {
			var self = this;
			$('.rent-rate').unbind().on('click', 'li', function (event) {
				var navLi = $('.rent-selected-nav li');
				if ($('.selected-rent span').text() == '请选择') {
					if (navLi.eq(0).hasClass('active')) {
						hl.toast('请选择集团')
					}
					if (navLi.eq(1).hasClass('active')) {
						hl.toast('请选择大区')
					}
					if (navLi.eq(2).hasClass('active')) {
						hl.toast('请选择公司')
					}
					return
				}
				$(this).addClass('active').siblings('li').removeClass('active')
				setTimeout(function () {
					self.getRank()
				}, 200);
			})
		},
		//选择大区集团时选择柱形图
		selected: function () {
			var self = this;
			$('.selected-rent').unbind().on('click', 'li', function (event) {
				setTimeout(function () {
					self.getRank()
				}, 200);
			});
		},
		//根据时间选择柱形图
		selectDate: function () {
			var self = this;
			$('.dt-dateControl').on('click', '.day-item', function (event) {
				if (event.pageY > 500) {
					$('.dt-dateControl').hide()
					return;
				}

				var navLi = $('.rent-selected-nav li');
				if ($('.selected-rent span').text() == '请选择') {
					if (navLi.eq(0).hasClass('active')) {
						hl.toast('请选择集团')
					}
					if (navLi.eq(1).hasClass('active')) {
						hl.toast('请选择大区')
					}
					if (navLi.eq(2).hasClass('active')) {
						hl.toast('请选择公司')
					}
					return
				}
				setTimeout(function () {
					self.getRank()
				}, 200);
			});
		},
		//获取出租面积\出租率\空置面积\空置率排名
		getRank: function () {
			var areaId = '#';
			var cityId = '#';
			var date = rentStatus0.date0 || hlDateUtil.countSeveralDaysTime(new Date(), 0);
			var type;
			var self = this;

			$('.rent-selected-nav li').each(function (index, el) {
				if ($(el).hasClass('active')) {
					if ($(el).text() === '大区') {
						areaId = $('.selected-rent span').attr('data-id')
					}
					if ($(el).text() === '公司') {
						cityId = $('.selected-rent span').attr('data-id')
					}
				}
			});
			$('.rent-rate li').each(function (index, el) {
				if ($(el).hasClass('active')) {
					type = $(el).attr('data-value')
				}
			});

			var data = {
				area_id: areaId || '#', //大区ID，没有传递#
				city_id: cityId || '#', //城市ID，没有传递#
				order_type: type || 'KZMJ', //排序类型
				report_date: date
			}

			hlhttp.get({
				url: 'report/project_acreage_rank/real_time',
				data: data,
				success: function (res) {
					if (res.length == 0) {
						$('.js-unit-no-data').show()
						$('.js-unit-chart-container').hide()
						return
					} else {
						$('.js-unit-no-data').hide()
						$('.js-unit-chart-container').show()
					}

					var arr = [];
					// var strk = [
					//   '',
					//   ' ',
					//   '  ',
					//   '   ',
					//   '    ',
					//   '     ',
					//   '      ',
					//   '       ',
					//   '        ',
					//   '         '
					// ]
					var oli = $('.rent-rate li');
					//空置面积
					if (oli.eq(0).hasClass('active')) {
						if (res.length < 10) {
							for (var i = 0; i < 10; i++) {
								// var onull = res[i] == undefined ? [strk[i], null] : [res[i].projectName, res[i].vaAcreage];
								// arr.push(onull)
								arr.push({
									name: res[i] == undefined ? null : res[i].projectName,
									x: res[i] == undefined ? null : i,
									y: res[i] == undefined ? null : res[i].vaAcreage*1,
								})
							}
						} else {
							for (var i = 0; i < res.length; i++) {
								// arr.push([res[i].projectName, res[i].vaAcreage])
								arr.push({
									name: res[i] == undefined ? null : res[i].projectName,
									x: res[i] == undefined ? null : i,
									y: res[i] == undefined ? null : res[i].vaAcreage*1,
								})
							}
						}

						self.charts(arr, 'm²', '空置面积')
					}
					//空置率
					if (oli.eq(1).hasClass('active')) {
						if (res.length < 10) {
							for (var i = 0; i < 10; i++) {
								// var onull = res[i] == undefined ? [strk[i], null] : [res[i].projectName, res[i].vaPercent];
								// arr.push(onull)
								arr.push({
									name: res[i] == undefined ? null : res[i].projectName,
									x: res[i] == undefined ? null : i,
									y: res[i] == undefined ? null : res[i].vaPercent*1,
								})
							}
						} else {
							for (var i = 0; i < res.length; i++) {
								// arr.push([res[i].projectName, res[i].vaPercent])
								arr.push({
									name: res[i] == undefined ? null : res[i].projectName,
									x: res[i] == undefined ? null : i,
									y: res[i] == undefined ? null : res[i].vaPercent*1,
								})
							}
						}
						self.charts(arr, '%', '空置率', 99)
					}
					//出租面积
					if (oli.eq(2).hasClass('active')) {
						if (res.length < 10) {
							for (var i = 0; i < 10; i++) {
								// var onull = res[i] == undefined ? [strk[i], null] : [res[i].projectName, res[i].czAcreage];
								// arr.push(onull)
								arr.push({
									name: res[i] == undefined ? null : res[i].projectName,
									x: res[i] == undefined ? null : i,
									y: res[i] == undefined ? null : res[i].czAcreage*1,
								})
							}
						} else {
							for (var i = 0; i < res.length; i++) {
								// arr.push([res[i].projectName, res[i].czAcreage])
								arr.push({
									name: res[i] == undefined ? null : res[i].projectName,
									x: res[i] == undefined ? null : i,
									y: res[i] == undefined ? null : res[i].czAcreage*1,
								})
							}
						}
						self.charts(arr, 'm²', '出租面积', null)
					}
					//出租率
					if (oli.eq(3).hasClass('active')) {
						if (res.length < 10) {
							for (var i = 0; i < 10; i++) {
								// var onull = res[i] == undefined ? [strk[i], null] : [res[i].projectName, res[i].czPercent];
								// arr.push(onull)
								arr.push({
									name: res[i] == undefined ? null : res[i].projectName,
									x: res[i] == undefined ? null : i,
									y: res[i] == undefined ? null : res[i].czPercent*1,
								})
							}
						} else {
							for (var i = 0; i < res.length; i++) {
								// arr.push([res[i].projectName, res[i].czPercent])
								arr.push({
									name: res[i] == undefined ? null : res[i].projectName,
									x: res[i] == undefined ? null : i,
									y: res[i] == undefined ? null : res[i].czPercent*1,
								})
							}
						}
						self.charts(arr, '%', '出租率', 99)
					}
				}
			})
		},
		charts: function (data, unit, nix, max) {
			var flag = false;
			var num = 0;
			if (data.length > 10) {
				flag = true;
			}

			console.log(data)


			$(function () {
				$('.rent-container').highcharts({
					chart: {
						type: 'column'
					},
					colors: ['#7fdced'],
					title: {
						text: nix + '(' + unit + ')',
						align: 'left',
						x: 0,
						y: 6,
						style: {
							color: '#666',
							fontSize: '14px'
						}
					},
					xAxis: {
						type: 'category',
						min: 0,
						max: 9,
						lineColor: '#eee',
						lineWidth: 1,
						tickLength: 0,
						labels: {
							useHTML: true,
							formatter: function () {
								// var t= this.value.replace(/\s+/g, ' ')
								var t = this.value && this.value.length > 12 ? this.value
									.substr(0, 12) + '...' : isNaN(this.value) ? this.value : ' '
								return '<span style="width:75px;display:block;text-align:center;white-space:normal;line-height:16px;">' +
									t + '</span>';
							},
							overflow: 'justify'
						}
					},
					scrollbar: {
						enabled: true
					},
					yAxis: [{

						title: {
							text: '',
							offset: 70,
							style: {
								color: '#fff'
							}
						},
						gridLineWidth: 0,
						lineColor: '#eee',
						lineWidth: 1,
						labels: {
							formatter: function () {
								return hlNumberUtil.formatNum(this.value)
							}
						}
					}],
					legend: {
						enabled: false
					},
					tooltip: {
						enabled: false,
						// shared: true,
						// useHTML: true,
						headerFormat: '<span style="font-size:13px;color:#fff;">{point.key}</span><br>',
						pointFormatter: function () {
							return '<span>' + nix + ': </span>' +
								'<span>' + Highcharts.numberFormat(this.y, 2, ".",
									",") + ' ' + unit + '</span>'
						},
						borderWidth: 0,
						backgroundColor: 'rgba(0,0,0,.8)',
						shadow: false,
						style: {
							fontSize: '14px',
							// padding: 10,
							fontWeight: '100',
							color: '#fff'
						}
					},
					series: [{
						name: ' ',
						data: data,
						dataLabels: {
							enabled: true,
							userHTML: true,
							style: {
								"color": "#666",
								"fontSize": "11px",
								"fontWeight": "bold",
								"textOutline": "1px 1px contrast"
							},
							format: '{point.y:.2f}' + unit
						},
						tooltip: {
							valueDecimals: 20
						},
					}]
				});
			});
		}
	}
	rentUnitCharts.init()

	function tzero(n) {
		return n < 10 ? '0' + n : '' + n
	}
}())
